<template>
  <CommonHeader bgImage="https://ik.imagekit.io/mpjl8xreo/sortdetail.png">
    <div class="info">
      <h1 class="title">归档详情</h1>
      <p style="color: #a8abb2">
        <span>
          <i class="iconfont icon-fenlei-copy"></i>{{ SortInfo.name }}</span
        >
        <span>
          <i class="iconfont icon-rili"></i>
          创建人: {{ SortInfo.username }}
          <i class="iconfont icon-rili"></i>
          创建于: {{ dayjs(SortInfo.createDate).format("YYYY-MM-DD") }}
        </span>
      </p>
    </div>
  </CommonHeader>
  <div class="sort-detail-container">
    <List
      :List="SortInfo['blog']"
      :Pagination="false"
      @changeRoute="changeRoute"
    >
      <template v-slot:content="{ item }">
        <img :src="item.cover" alt="" style="width: 100%; height: 180px" />
        <div class="card-info">
          <h1>{{ item.title }}</h1>
          <p>{{ item.summary }}</p>
        </div>
      </template>
    </List>
  </div>
</template>
<script setup>
import List from "@/components/List/index.vue";
import { getCurrentInstance, ref } from "vue";
import { useRoute } from "vue-router";
import CommonHeader from "@/components/CommonHeader/index.vue";
import { getSortDetailList } from "@/api/sort.js";
import dayjs from "dayjs";
import router from "@/router/index.js";

const { proxy } = getCurrentInstance();
let SortInfo = ref({});
const route = useRoute();

const { id: SortId } = route.params;
const getSortList = async () => {
  let res = await getSortDetailList({ id: SortId });
  if (res && res.status === 200) {
    SortInfo.value = res.data;
  }
};
// 跳转到博客详情
const changeRoute = (id) => {
  router.push("/preview/" + id);
};
getSortList();
</script>
<style lang="scss" scoped>
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.info {
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .title {
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #ffff;
    font-weight: bold;
    margin: 15px 0;
  }

  p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    span {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  }
}

.sort-detail-container {
  width: 100%;
  animation: profile_in 0.8s;

  .card-info {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #fafafa;

    h1 {
      width: 100%;
      font-size: 16px;
      color: #606266;
      @include ellipsis;
    }

    p {
      width: 100%;
      font-size: 12px;
      color: #a8abb2;
      @include ellipsis;
    }
  }
}

@media screen and (max-width: 960px) {
  .info {
    width: 100% !important;
  }
}
</style>
